<template>
    <div id="account-info">
<!--        <h1>我是账户信息</h1>-->
       <Title :title="title"></Title>
        <div class="kuang">
            <div class="kuang2">
                <div class="title">邮箱：{{$store.state.user.email}}</div>
                <div class="change"><ChangeEmail/></div>
            </div>
        </div>
        <div class="kuang">
            <div class="kuang2" style="display: inline-block">
                <div class="title">手机号：{{$store.state.user.phone}}</div>
                <div class="change"><ChangePhone/></div>
            </div>
        </div>


    </div>
</template>

<script>
    import Title from "@/components/title/Title";
    import ChangeEmail from "./changeEmail/ChangeEmail";
    import ChangePhone from "./changePhone/ChangePhone";
    export default {
        name: "AccountInfo",
        components: {
            Title,
            ChangeEmail,
            ChangePhone
        },
        data(){
            return {
                title:"账户资料",
                email:'abc1234@qq.com',
                phone:'13800138000',
                visible: false,
                verificationCode:'',
            }
        },
        methods:{
            changeEmail(){
              console.info("修改邮箱")
            },
            changePhone(){
                console.info("修改手机号")
            },
            sendVerify(){
                console.info("发送验证码");
            },
            confirm(){
                console.info("确定");
            }
        }
    }
</script>

<style scoped>

    .kuang{
        width: 530px;
        height: 40px;
    }
    .kuang2{
        width: 380px;
        height: 40px;
        margin:20px 0px;
        line-height: 40px;
    }
    .title{
        float: left;
    }
    .change{
        float: right;
        width: 150px;
        text-align:center;
        color: white;
        cursor:pointer;
    }

</style>
